<template>
  <div class="app">
    <h2>我是app组件</h2>
    <h2>用户名：{{ account.userName }}--密码：{{ account.password }}</h2>
    <button @click="changeUserName">修改用户名</button>
    <button @click="changePassword">修改密码</button>
    <ul>
      <li v-for="(item,index) in numbers">{{ item }}</li>
    </ul>
    <button @click="pushNumbers">往数组里面push一个元素</button>
  </div>
</template>

<script>
/*
reactive():返回一个对象的响应式代理(主要用来定义复杂数据类型)
  当使用reactive函数处理数据之后，数据再次被使用的时候就会进行依赖收集
  当数据发生改变时，所有收集的依赖都是进行对应的响应式操作
* */
import {reactive} from "vue";

export default {
  name: 'App',
  setup(props, context) {
    const account = reactive({userName: "陶品奇", password: 20011103})
    const numbers = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])

    const changeUserName = () => {
      //修改响应式对象的属性值
      account.userName = "TAOPINQI"
    }
    //修改响应式对象的属性值
    const changePassword = () => {
      //修改响应式对象的属性值
      account.password = 123456
    }
    const pushNumbers = () => {
      //往响应式数组里push一个元素
      numbers.push(11)
      //通过所以修改第一个元素的值
      numbers[0] = 1000
    }
    return {
      account,
      numbers,
      changeUserName,
      changePassword,
      pushNumbers
    }
  }
}
</script>

<style lang="less"></style>
